<template>
	<view class="car-bauty">
		<!-- 瀑布流布局列表 -->
    <u-waterfall v-model="flowList" ref="uWaterfall">
    	<template v-slot:left="{leftList}">
    		<view v-for="(item, index) in leftList" :key="index" class="column-list left" @click="gotoDetail(item)">
          <view class="item-masonry">
            <u-lazy-load :image="item.picture_path+'!idx'"></u-lazy-load>
            <view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） -->
              <view class="listtitle1">{{ item.goods_name }}</view>
              <view class="listtitle2 flex">
                <text class="isGover" v-if="item.proprietary">自营</text>
                <text class="listtitle2son">￥</text>
                <text class="listtitle2son">{{ item.b_price }}</text>
                <i-icon v-if="isBuyShow" icon="iconicon2" size="40rpx" color="#FBB000" @click.stop.native="addToBuyCar(item)"></i-icon>
              </view>
            </view>
          </view>
    			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
    		</view>
    	</template>
    	<template v-slot:right="{rightList}">
    		<view v-for="(item, index) in rightList" :key="index" class="column-list right" @click="gotoDetail(item)">
          <view class="item-masonry">
            <u-lazy-load :image="item.picture_path+'!idx'"></u-lazy-load>
            <view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） -->
              <view class="listtitle1">{{ item.goods_name }}</view>
              <view class="listtitle2 flex">
                <text class="isGover" v-if="item.proprietary">自营</text>
                <text class="listtitle2son">￥</text>
                <text class="listtitle2son">{{ item.b_price }}</text>
                <i-icon v-if="isBuyShow" icon="iconicon2" size="40rpx" color="#FBB000" @click.stop.native="addToBuyCar(item)"></i-icon>
              </view>
            </view>
          </view>
    			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
    		</view>
    	</template>
    </u-waterfall>
		
	</view>
</template>

<script>
export default {
  name: 'card-item',
	props: {
		carList: {
			type: Array,
			default: () => [],
		},
    
    // 当前店铺主页的店铺id
    storeId: {
      type: String,
    }
	},
	data() {
		return {
			flowList: [],
		}
	},
  
  computed: {
    // 显示购物车按钮
    isBuyShow() {
      // 当前账号店铺id
      let storeId = this.$store.state.userInfoDetail.store.storeId
      return this.storeId !== storeId
    }
  },
  
  created() {
    console.log('看看看', this.carList)
    this.flowList = this.carList
  },
  
  watch: {
    // 监听车品列表
    carList(val) {
      console.log('监听数组', val)
      /* 
        * if: 如果车品列表为空，则把瀑布流组件的数据清空
        * 
        * else: 如果车品列表有数据，则先把瀑布流组件的数组数据清空
        * 然后调用处理数组的方法，该方法处理瀑布流组件用到的数组
        * 
      */
      if (val.length === 0) {
        this.flowList = []
        this.$refs.uWaterfall.clear()
      } else {
        this.flowList = val
        // this.addRandomData()
      }
    }
  },
  
  mounted() {
    // this.addRandomData()
  },
  
	methods: {
    // 处理瀑布流组件所用到的数组数据
    addRandomData() {
      for(let i = 0; i < this.carList.length; i++) {
        let index = this.$u.random(0, this.carList.length - 1);
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.carList[index]))
        item.guid = this.$u.guid()
        this.flowList.push(item)
      }
    },
    
    // 跳转到车品详情页
    gotoDetail(item) {
      // 跳转到车品详情页面
      uni.navigateTo({
        url: `/pages_carGoods/carGoodsDetail/carGoodsDetail?id=${item.id}`
      })
      console.log(item, item.id)
    },
    
    // 加入购物车
    async addToBuyCar(item) {
      try {
        console.log(item)
        let data = {
          'buyer_store_id': this.$store.state.userInfoDetail.store.storeId,  // 当前用户storeid
          'store_id': this.storeId,  // 商品所属店铺id
          'car_supplies_id': item.id, // 车品id
          'count': 1  // 数量
        }
        console.log(data)
        uni.showLoading({ title: '正在加载' })
        const res = await this.$api.buyCar.AddShoppingTrolley(data)
        console.log(res)
        uni.showToast({ title: '已添加到购物车' })
      } catch (err) {}
      uni.hideLoading()
    },
  }
};
</script>

<style lang="scss" scoped>
  
  .column-list {
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    
    &.left {
      margin-bottom: 24rpx;
      margin-left: 24rpx;
      margin-right: 12rpx;
    }
    
    &.right {
      margin-bottom: 24rpx;
      margin-left: 12rpx;
      margin-right: 24rpx;
    }
  }
  
	//瀑布流
	.isGover{
		background-color: rgb(255,224,59);
		color: rgb(51,51,51);
		font-weight: bold;
		font-size: 18rpx;
		border-radius: 10rpx;
		padding: 2rpx 10rpx 2rpx 10rpx;
	}
	.item-masonry image {
		width: 100%;
	}
	
	.listtitle {
		padding: 0 20rpx 20rpx;
		font-size: 24rpx;
	
		.listtitle1 {
			line-height: 39rpx;
			font-size: 28rpx;
			margin-top: 20rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
		}
	
		.listtitle2 {
      margin-top: 20rpx;
			font-size: 34rpx;
      
			.listtitle2son {
				color: #EB5C02;
        font-weight: bold;
			}
      
      .iconicon2 {
        margin-left: auto;
      }
		}
	}
</style>
